<template>
  <div class="app-container">
    <div class="optionBox clearfix" style="margin: 0;">
      <div class="fr clearfix buttonBox new-refrech">
        <el-button
          class="btn-size fl"
          icon="el-icon-back"
          title="返回"
          onclick="javascript:window.history.back(-1);">
        </el-button>
        <el-button
          class="btn-size fl"
          icon="el-icon-refresh"
          title="刷新"
          @click="refresh">
        </el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      stripe
      class="table-out-border"
      v-loading="isLoading">
      <el-table-column align="center" prop="subOrderId" label="子订单编号" min-width="100"></el-table-column>
      <el-table-column align="center" prop="transMode" label="模式" min-width="50">
        <template slot-scope="scope">{{scope.row.transMode|transModeStatusF}}</template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" min-width="120">
        <template slot-scope="scope">{{scope.row.createTime|transformTimeF}}</template>
      </el-table-column>     
      <el-table-column align="center" prop="customerName" label="姓名" min-width="70"></el-table-column>
      <!-- <el-table-column align="center" prop="cardNo" label="卡号" min-width="150"> </el-table-column> -->
      <!-- <el-table-column align="center" prop="mobile" label="手机号" min-width="100"> </el-table-column> -->
      <el-table-column align="center" prop="stagesAmt" label="代偿金额(元)" min-width="80"> 
        <template slot-scope="scope">{{scope.row.stagesAmt|moneyFormatter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="stagesFee" label="代偿手续费(元)" min-width="100"> 
        <template slot-scope="scope">{{scope.row.stagesFee|moneyFormatter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" min-width="60">
        <template slot-scope="scope">{{scope.row.status|subOrderStatusF}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="viewTransaction(scope.row)">查看交易</el-button>
          <el-button type="text" @click="viewWaterAccount(scope.row)">查看流水</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageBox fr clearfix">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 40]"
        :total="totalCount"
        :page-size="keywords.pageSize"
        :current-page="keywords.page"
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { clearNullAttr } from '@/api/common'
  import { querySubOrderList } from '@/api/order'
  
  export default {
    data: function() {
      return {
        isLoading: false,
        tableData: null,
        totalCount: null, // 数据总条数
        keywords: { // 查询参数
          page: 1,
          pageSize: 10,
          orderId: this.$route.query.id // 订单编号
        }
      }
    },
    filters: {
      subOrderStatusF(statusCode) {
        const statusList = {
          '0': '默认',
          '1': '成功',
          '2': '待查询',
          '3': '待补发',
          '4': '待补发成功',
          '5': '待补扣',
          '6': '补扣成功',
          '7': '转催收',
          '8': '失败',
          '9': '人工置成功',
          '10': '催收成功',
          '11': '催收失败'
        }
        return statusList[statusCode]
      },
      transModeStatusF(statusCode) {
        const statusList = {
          '2': '2笔',
          '3': '3笔'
        }
        return statusList[statusCode]
      }
    },
    computed: {},
    created: function() {
      this.fetchData()
    },
    methods: {
      fetchData() { // 查询代偿主订单明细-子订单
        this.isLoading = true
        querySubOrderList({}, this.keywords).then(res => {
          console.log('list', res)
          if (res.code === '000000') {
            this.tableData = res.data.subOrderList
            this.totalCount = res.data.totalCount
            this.isLoading = false
          }
        }).catch(error => {
          this.isLoading = false
          console.log(error)
        })
      },
      refresh() { // 刷新按钮点击事件
        this.keywords.page = 1
        this.fetchData()
      },
      viewTransaction(row) { // 查看交易
        this.$router.push({
          path: '/order/ordertransaction',
          query: { subOrderId: row.subOrderId }
        })
      },
      viewWaterAccount(row) { // 查看流水
        this.$router.push({
          path: '/order/orderwaterflow',
          query: { subOrderId: row.subOrderId }
        })
      },
      handlePageChange(page) { // 页面跳转事件
        this.keywords.page = page
        this.fetchData()
      },
      handlePageSizeChange(pageSize) { // 表格一页显示的数据数目 改变事件
        this.keywords.pageSize = pageSize
        this.fetchData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  /* type="text/scss" */
  .optionBox {
    label{
      margin-right: 10px;
    }
    form {
      .chooseInput {
        width: 300px;
        margin-right: 10px;
        .el-select {
          min-width: 110px;
        }
      }
    }
  }
  .table-out-border {
    .el-button {
      padding: 8px 8px;
      margin: 0;
    }
  }
</style>
